<template>
  <Card dis-hover :bordered="false">
    <Form inline>
      <Row>
        <Col span="22">
          <FormItem>
            <DatePicker
              v-model="params.date"
              type="daterange"
              :options="options"
              placeholder="日期选择"
              @on-change="searchData"
            />
          </FormItem>
          <FormItem>
            <Select
              v-width="120"
              placeholder="请选择平台"
              v-model="params.platform_id"
              @on-change="searchData"
              :filterable="platList.length >= 10"
              clearable
            >
              <Option
                v-for="item in platList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
          <FormItem>
            <TreeSelect
              v-width="150"
              placeholder="部门"
              v-model="params.department_id"
              :data="departmentList"
              @on-change="searchData"
              @on-clear="clearDep"
              clearable
            />
          </FormItem>
          <FormItem>
            <Select
              v-width="120"
              placeholder="医生"
              v-model="params.doctor_id"
              @on-change="searchData"
              @on-clear="searchData"
              :filterable="doctorList.length >= 10"
              clearable
            >
              <Option
                v-for="item in doctorList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
        </Col>
        <Col span="2" style="text-align: right">
          <Button
            type="primary"
            @click="handleAdd"
            class="ivu-ml-8"
            v-hasC="{
              name: 'v1-buss-accounts-data-update',
              flag: 'v1/buss/accounts-data/update',
            }"
            >录入数据</Button
          >
        </Col>
      </Row>
    </Form>
    <Table
      :columns="columns"
      :data="list"
      :loading="loading"
      @on-sort-change="sortChange"
      :max-height="tableHeigth"
    >
      <template #action="{ row }">
        <a
          @click="handleEdit(row)"
          v-hasC="{
            name: 'v1-buss-accounts-data-update2',
            flag: 'v1/buss/accounts-data/update',
          }"
          >编辑</a
        >
        <Divider
          type="vertical"
          v-hasC="{
            name: 'v1-buss-accounts-data-update2',
            flag: 'v1/buss/accounts-data/update',
          }"
        />
        <a
          @click="handleDel(row.id)"
          class="del"
          v-hasC="{
            name: 'v1-buss-accounts-data-delete',
            flag: 'v1/buss/accounts-data/delete',
          }"
          >删除</a
        >
      </template>
    </Table>
    <Page
      class="ivu-mt-16"
      :total="total"
      :modelValue="params.current"
      :page-size="params.size"
      :page-size-opts="pageOpts"
      show-total
      show-sizer
      @on-change="changePage"
      @on-page-size-change="changepageSize"
    />
    <Modal
      :mask-closable="false"
      v-model="addModal"
      title="录入数据"
      :width="500"
      :footer-hide="true"
      :draggable="true"
    >
      <Form ref="create" :model="dataInfo" :rules="rules" :label-width="70">
        <FormItem label="日期" prop="date_time" required>
          <DatePicker
            style="width: 100%"
            :disabled="!edit"
            v-model="dataInfo.date_time"
            type="date"
            :options="options"
            placeholder="日期选择"
          />
        </FormItem>
        <Row>
          <Col span="12">
            <FormItem label="平台" prop="platform_id" required>
              <Select
                placeholder="请选择平台"
                :disabled="!edit"
                @on-change="changePlat"
                v-model="dataInfo.platform_id"
                :filterable="platAddList.length >= 10"
                clearable
              >
                <Option
                  v-for="item in platAddList"
                  :value="+item.value"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem
              label="账号"
              prop="account_id"
              v-if="accontAddList.length > 0"
              required
            >
              <Select
                placeholder="请选择账号"
                :disabled="!edit"
                v-model="dataInfo.account_id"
                :filterable="accontAddList.length >= 10"
                clearable
              >
                <Option
                  v-for="item in accontAddList"
                  :value="+item.value"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="私信" prop="private_sms">
              <InputNumber
                style="width: 100%"
                placeholder="私信"
                v-model="dataInfo.private_sms"
                :min="0"
              />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="线索" prop="clue">
              <InputNumber
                style="width: 100%"
                placeholder="线索"
                v-model="dataInfo.clue"
                :min="0"
              />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="有效线索" prop="effective_clue">
              <InputNumber
                style="width: 100%"
                placeholder="有效线索"
                v-model="dataInfo.effective_clue"
                :min="0"
              />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="到诊" prop="arrive">
              <InputNumber
                style="width: 100%"
                placeholder="到诊"
                v-model="dataInfo.arrive"
                :min="0"
              />
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div slot="footer" style="text-align: right">
        <Button type="default" @click="addModal = false">取消</Button>
        <Button type="primary" @click="ok" style="margin-left: 10px"
          >确定</Button
        >
      </div>
    </Modal>
  </Card>
</template>
<script>
import {
  accountsDataList,
  updateAccountsData,
  accountsCondition,
  deleteServiceData,
} from "@api/dataentry.js";
import dayjs from "dayjs";
export default {
  name: "servicedata",
  data() {
    return {
      tableHeigth: document.body.clientHeight - 280,
      addModal: false,
      edit: true,
      params: {
        date: [],
        platform_id: "",
        doctor_id: "",
        order_column: "",
        order_sort: "",
        department_id: "",
        current: 1,
        size: 10,
      },
      platList: [],
      doctorList: [],
      platAddList: [],
      departmentList: [],
      accontAddList: [],
      total: 0,
      pageOpts: [10, 20, 30, 40],
      columns: [
        {
          key: "date_time",
          title: "日期",
          minWidth: 120,
        },
        {
          key: "platform_name",
          title: "平台",
          minWidth: 150,
        },
        {
          key: "department_name",
          title: "部门",
          minWidth: 100,
        },
        {
          key: "account_name",
          title: "账号",
          width: 150,
        },
        {
          key: "doctor_name",
          title: "医生",
          minWidth: 100,
        },
        {
          key: "private_sms",
          title: "私信",
          width: 80,
          sortable: "custom",
        },
        {
          key: "clue",
          title: "线索",
          width: 80,
          sortable: "custom",
        },
        {
          key: "effective_clue",
          title: "有效线索",
          width: 110,
          sortable: "custom",
        },
        {
          key: "arrive",
          title: "到诊",
          width: 80,
          sortable: "custom",
        },
        {
          key: "use_mname",
          title: "运营人",
          width: 125,
        },
        {
          slot: "action",
          title: "操作",
          width: 110,
          fixed: "right",
        },
      ],
      list: [],
      loading: false,
      btnLoading: "",
      dataInfo: {
        id: "",
        date_time: this.$Date().format("YYYY-MM-DD"),
        platform_id: "",
        account_id: "",
        private_sms: null,
        clue: null,
        effective_clue: null,
        arrive: null,
      },
      rules: {
        date_time: [{ required: true, message: "请选择日期" }],
        platform_id: [{ required: true, message: "请选择平台" }],
        account_id: [{ required: true, message: "请选择账号" }],
      },
      options: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        },
      },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    //切换page
    changePage(index) {
      this.params.current = index;
      this.getData();
    },
    changepageSize(val) {
      this.params.size = val;
      this.getData();
    },
    sortChange(e) {
      this.params.order_column = e.key.replace(/_str$/, "");
      this.params.order_sort = e.order;
      this.getData();
    },
    changePlat(e) {
      if (e) {
        accountsCondition({ platform_id: e }).then((res) => {
          this.accontAddList = res.condition.accounts_arr;
          this.dataInfo.account_id = "";
          if (this.accontAddList.length == 0) {
            this.$Message.error("该平台下没绑定任何账号~");
          }
        });
      }
    },
    handleAdd() {
      accountsCondition({ platform_id: 0, id: 0 }).then((res) => {
        this.platAddList = res.condition.platform_arr;
        this.accontAddList = [];
        this.dataInfo = {
          date_time: this.$Date().format("YYYY-MM-DD"),
          platform_id: "",
          account_id: "",
          private_sms: null,
          clue: null,
          effective_clue: null,
          arrive: null,
        };
      });

      this.addModal = true;
      this.edit = true;
      this.$refs.create.resetFields();
    },
    handleDel(index) {
      this.$Modal.confirm({
        title: "删除提示",
        content: "是否确认删除此条记录，删除后不可恢复",
        onOk: () => {
          deleteServiceData({ id: index })
            .then(() => {
              this.$Message.success("删除成功");
              this.getData();
            })
            .catch(() => {});
        },
      });
    },
    handleEdit(info) {
      this.addModal = true;
      this.edit = false;
      accountsCondition({ platform_id: info.platform_id, id: info.id }).then(
        (res) => {
          this.platAddList = res.condition.platform_arr;
          this.accontAddList = res.condition.accounts_arr;
          this.dataInfo = {
            id: info.id,
            date_time: info.date_time,
            platform_id: +info.platform_id,
            account_id: +info.account_id,
            private_sms: info.private_sms ? +info.private_sms : null,
            clue: info.clue ? +info.clue : null,
            effective_clue: info.effective_clue ? +info.effective_clue : null,
            arrive: info.arrive ? +info.arrive : null,
          };
        }
      );
    },
    changeData(data) {
      data.forEach((item) => {
        item.value = item.id;
        item.title = item.department_name;
        item.expand = true;
        if (item.children && item.children.length > 0) {
          this.changeData(item.children);
        }
      });
      return data;
    },
    getData() {
      this.loading = true;
      const params = {
        date_stime: this.params.date[0]
          ? dayjs(this.params.date[0]).format("YYYY-MM-DD")
          : "",
        date_etime: this.params.date[1]
          ? dayjs(this.params.date[1]).format("YYYY-MM-DD")
          : "",
        platform_id: this.params.platform_id,
        doctor_id: this.params.doctor_id,
        department_id: this.params.department_id,
        order_column: this.params.order_column,
        order_sort: this.params.order_sort,
        pageSize: this.params.size,
        page: this.params.current,
      };
      accountsDataList(params)
        .then((res) => {
          this.doctorList = res.condition.doctors_arr;
          this.platList = res.condition.platform_arr;
          this.departmentList = this.changeData(res.condition.department_arr);
          this.list = res.list;
          this.total = res.total;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    searchData() {
      this.params.current = 1;
      this.getData();
    },
    clearDep() {
      this.params.department_id = "";
      this.searchData();
    },
    addServiceData() {
      const params = {
        id: this.dataInfo.id,
        date_time: dayjs(this.dataInfo.date_time).format("YYYY-MM-DD"),
        platform_id: this.dataInfo.platform_id,
        account_id: this.dataInfo.account_id,
        private_sms: this.dataInfo.private_sms,
        clue: this.dataInfo.clue,
        effective_clue: this.dataInfo.effective_clue,
        arrive: this.dataInfo.arrive,
      };
      if (this.edit) {
        updateAccountsData(params)
          .then((res) => {
            this.$Message.success("录入成功");
            this.addModal = false;
            this.getData();
          })
          .catch(() => {});
      } else {
        updateAccountsData(Object.assign({}, params, { id: this.dataInfo.id }))
          .then((res) => {
            this.$Message.success("编辑成功");
            this.addModal = false;
            this.getData();
          })
          .catch(() => {});
      }
    },
    ok() {
      this.$refs.create.validate((valid) => {
        if (valid) {
          this.addServiceData();
        } else {
          this.addModal = true;
          return;
        }
      });
    },
  },
};
</script>
